// 这个文件就是将 axios发请求的时候， 写一个函数，二次封装以下
// 让我们后面发请求的代码精简一些， 方便后期维护
// axios官网： http://www.axios-js.com/zh-cn/docs/#axios-create-config
// 接口文档地址：https://apifox.com/apidoc/project-934563/api-20384515
import axios from 'axios'
import { Toast } from 'vant'
import { getToken, delToken } from '@/utils/storage'
import router from '@/router/index'

const instance = axios.create({
  // baseURL表示请求基地址，就是所有的请求，就会自动加上这个前缀
  baseURL: 'http://interview-api-t.itheima.net/h5',
  // timeout表示超时时间，超过了这个秒数如果请求还没有返回，那么前端就主动报错，
  timeout: 10000
})

// 请求拦截器(所有请求发出去之前都会执行函数) + 响应拦截器(所有的响应到业务代码之前执行的函数)
// 添加请求拦截器
// 请求拦截器有两个回调函数，
// 第一个回调函数是请求 发出去发成功了执行的函数
// 第二个回调函数是请求发出去的时候发失败了执行的函数
instance.interceptors.request.use(function (config) {
  const token = getToken()
  console.log(1, config)
  // 给所有的请求头添加一个token参数，统一加的
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }

  return config
}, function (error) {
  console.log(2)
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  console.log(3, response)
  // 在响应拦截器里面 对返回业务代码的数据进行 脱壳处理（因为axios发送的请求返回值是一个大对象，有很多数据我们不要）
  return response.data
}, function (error) {
  // 响应拦截器第二个回调函数，当请求返回 4xx  5xxx的时候 执行这个函数
  // console.dir(error)
  // // 这里不是.vue的组件，就不能使用 this.$toast
  // Toast(error.response.data.message)
  // return Promise.reject(error)
  // return 123
  if (error.response) {
    // 如果错误对象存在，在写if else， 401的时候应该单独处理以下
    if (error.response.data.code === 401) {
      // this.$router只能在 .vue的后缀名的组件中使用，在js里面不能用， 这个值的本质就是 new VueRouter()的实例对象
      // token过期以后，应该删除token，然后在跳转回登录页面
      delToken()
      router.push('/login')
    } else {
      Toast(error.response.data.message)
    }
  }
  return Promise.reject(error)
})

// 导出一个axios的实例对象， 后面我们在前端页面发请求，就是用instance，不要使用axios
export default instance
